<template>
  <div class="page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品管理详情</span>
      </div>
      <div class="card-content">
        <ul class="flex-content">
          <li class="li">
            <p class="item">ID：<span v-if="info.id">{{info.id.toString()}}</span></p>
            <p class="item">商品名称：{{info.name}}</p>
          </li>
          <li class="li">
            <p class="item">店铺ID：<span v-if="info.storeCategory">{{info.storeCategory.id}}</span></p>
            <p class="item">售卖类型：{{info.sellable ? '上架' : '下架'}}</p>
          </li>
          <li class="li">
            <p class="item">所属店铺：<span v-if="info.storeCategory">{{info.storeCategory.name}}</span></p>
            <p class="item">推荐状态：{{info.featured ? '已推荐' : '未推荐'}}</p>
          </li>
        </ul>
        <ul>
          <li class="item">排序数值：{{info.position}}</li>
          <li class="item">商品缩略图：<img class="img" :src="$store.state.prefix + info.thumbnail" /> </li>
          <li class="item">轮播图：
            <img v-for="item in info.images" class="img" :src="$store.state.prefix + item" />
          </li>
          <li class="item">
            <el-table :data="info.goodsList" border>
              <el-table-column label="SKU码" prop="number" align="center" />
              <el-table-column label="色号" prop="colorNumber" align="center" />
              <el-table-column label="电子色卡" prop="colorCard" align="center">
                <template slot-scope="scope"><image class="img" :src="$store.state.prefix + scope.row.colorCard" /> </template>
              </el-table-column>
              <el-table-column label="米样价格" prop="price" align="center">
                <template slot-scope="scope">￥{{scope.row.price}}/{{scope.row.unit}}</template>
              </el-table-column>
              <el-table-column label="大货价格" prop="largePriceList" width="200">
                <template slot-scope="scope">
                  <div class="largePriceList" v-if="scope.row.largePriceList">
                    <div v-for="items in scope.row.largePriceList" class="largePrice-item">
                      <p class="group-name">{{ items.group.name}}</p>
                      <p class="price">￥{{items.price}}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="大货库存" prop="stocks" align="center">
                <template slot-scope="scope">{{scope.row.stocks}}{{scope.row.unit}}</template>
              </el-table-column>
              <el-table-column label="大货起批数" prop="limitQuantity" align="center">
                <template slot-scope="scope">{{scope.row.limitQuantity}}{{scope.row.unit}}</template>
              </el-table-column>
            </el-table>
          </li>
          <li class="item code">产品分享二维码：<span class="img" ref="qrcode"></span></li>
        </ul>
        <el-button type="success" class="back" @click="handleBack">返回上一级</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { get } from '@/project/service/product'
import QRCode from 'qrcodejs2'
export default {
  name: "show",
  data() {
    return {
      info: {}
    }
  },
  mounted() {
    get({id: this.$route.params.id}, res=>{
      res.images = res.images.split(',')
      this.info = res
      this.createCode()
    })
  },
  methods: {
    handleBack() {
      this.$router.back()
    },
    //生成二维码
    createCode() {
      new QRCode(this.$refs.qrcode, {
        text: this.info.id,
        width: 80,
        height: 80
      })
    }
  }
}
</script>

<style scoped lang="less">
.card-content {
  padding: 20px;
}
.flex-content {
  display: flex;
  justify-content: space-between;
}
.li {
  list-style: none;
}
.item {
  margin-bottom: 20px;
  list-style: none;
  .img {
    width: 80px;
    height: 80px;
    vertical-align: top;
    margin-right: 20px;
  }
}
.largePriceList {
  width: 100%;
  line-height: 20px;
  font-size: 12px;
  .largePrice-item {
    float: left;
    text-align: center;
    padding: 5px;
    width: 50%;
    .group-name {
      color: #999999;
    }
    .price {
      border: 1px solid #eeeeee;
    }
  }
}
.back {
  margin-top: 20px;
}
.code {
  display: flex;
  align-items: center;
}
</style>
